<template>
  <el-dialog
    v-model="visible"
    title="查看 CRD 定义"
    width="80%"
    top="5vh"
    :show-close="true"
    :close-on-click-modal="false"
  >
    <div class="crd-viewer-container">
      <div class="header">
        <div class="info">
          <el-tag type="info" size="small">只读浏览</el-tag>
          <span class="file-info">{{ fileName || 'CRD Definition' }}</span>
        </div>
        <div class="actions">
          <el-button size="small" @click="copyToClipboard">
            <el-icon><CopyDocument /></el-icon>
            复制内容
          </el-button>
          <el-button size="small" @click="downloadFile">
            <el-icon><Download /></el-icon>
            下载文件
          </el-button>
        </div>
      </div>
      
      <div class="editor-container">
        <div ref="editorRef" class="editor"></div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, onBeforeUnmount, nextTick } from 'vue'
import { CopyDocument, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps<{
  modelValue: boolean
  crdText: string
  fileName?: string
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const visible = ref(false)
const editorRef = ref<HTMLElement>()
let monaco: any = null
let editor: any = null
let configureMonacoYaml: any = null

// 监听modelValue变化
watch(() => props.modelValue, (newVal) => {
  visible.value = newVal
  if (newVal) {
    nextTick(() => {
      initEditor()
    })
  }
})

// 监听visible变化
watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
  if (!newVal && editor) {
    editor.dispose()
    editor = null
  }
})

// 监听CRD文本变化
watch(() => props.crdText, (newText) => {
  if (editor && newText) {
    editor.setValue(newText)
  }
})

async function initEditor() {
  if (!editorRef.value || editor) return
  if (!monaco) {
    monaco = (await import('monaco-editor'))
    configureMonacoYaml = (await import('monaco-yaml')).configureMonacoYaml
  }
  if (!monaco || !configureMonacoYaml) return
  // 配置YAML语言支持
  configureMonacoYaml(monaco)
  editor = monaco.editor.create(editorRef.value, {
    value: props.crdText || '',
    language: 'yaml',
    theme: 'vs-dark',
    automaticLayout: true,
    readOnly: true, // 只读模式
    tabSize: 2,
    insertSpaces: true,
    detectIndentation: false,
    minimap: { enabled: true },
    scrollBeyondLastLine: false,
    fontSize: 14,
    wordWrap: 'on',
    folding: true,
    lineNumbers: 'on',
    renderWhitespace: 'boundary',
    bracketPairColorization: { enabled: true },
    contextmenu: false, // 禁用右键菜单以强调只读
  })
}

function closeDialog() {
  visible.value = false
}

async function copyToClipboard() {
  if (!props.crdText) {
    ElMessage.warning('没有内容可复制')
    return
  }
  
  try {
    await navigator.clipboard.writeText(props.crdText)
    ElMessage.success('已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

function downloadFile() {
  if (!props.crdText) {
    ElMessage.warning('没有内容可下载')
    return
  }
  
  const blob = new Blob([props.crdText], { type: 'text/yaml' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = props.fileName || 'crd-definition.yaml'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
  
  ElMessage.success('文件下载成功')
}

onBeforeUnmount(() => {
  if (editor) {
    editor.dispose()
  }
})
</script>

<style lang="scss" scoped>
.crd-viewer-container {
  height: 70vh;
  display: flex;
  flex-direction: column;

  .header {
    padding: 12px 0;
    border-bottom: 1px solid #e1e8ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .info {
      display: flex;
      align-items: center;
      gap: 12px;

      .file-info {
        font-weight: 500;
        color: #2c3e50;
      }
    }

    .actions {
      display: flex;
      gap: 8px;
    }
  }

  .editor-container {
    flex: 1;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
    overflow: hidden;

    .editor {
      height: 100%;
      width: 100%;
    }
  }
}

// 弹窗样式调整
:deep(.el-dialog) {
  .el-dialog__body {
    padding: 20px;
  }
}
</style> 